/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  ScrollView,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  TouchableOpacity,
  Button,
  Alert
} from 'react-native';
import Storage from 'react-native-storage';
import Swiper from 'react-native-swiper';
import Tab from './src/components/Tab'
import Bar from './src/components/Bar'


const data = ['推荐', '家居', '餐厨', '床上用品']

const barData = ['首页', '商城', '灵感', '我的']

const imgData = [
  {
    img: require('./src/image/img.png'),
    text: '北欧原木色置物架'
  },
  {
    img: require('./src/image/img2.png'),
    text: '北欧原木色置物架'
  },
  {
    img: require('./src/image/img3.png'),
    text: '北欧原木色置物架'
  },
  {
    img: require('./src/image/img4.png'),
    text: '北欧原木色置物架'
  },
  {
    img: require('./src/image/img5.png'),
    text: '北欧原木色置物架'
  },
  {
    img: require('./src/image/img6.png'),
    text: '北欧原木色置物架'
  }
]

const storage = new Storage({
  size: 1000,
  storageBackend: AsyncStorage,
  defaultExpires: null,
  enableCache: true,
})

const App = () => {

  const [active, setActive] = useState(0)
  const [barActive, setBarActive] = useState(0)
  const [list, setList] = useState(imgData)

  useEffect(() => {
    loadFromLocal()
  }, [])

  const loadFromLocal = async () => {
    const newList= await storage.load({
        key:'list'
    })
    newList && setList(JSON.parse(newList))
}

  const onActive = (index) => {
    setActive(index)
  }
  const onBarActive = (index) => {
    setBarActive(index)
  }

  const onLike = (index) => {
    list[index].like = !!!list[index].like;
    setList(JSON.parse(JSON.stringify(list)));
    storage.save({
      key:'list',
      data: JSON.stringify(list),
      expires: null
  });
  }

  const renderContent = () => {
    return (
      <View style={styles.test}>
        <View style={styles.logoWrap}>
          <Image source={require('./src/image/logo.png')} style={styles.logo} />
        </View>
        {
          barActive == 0 ?
            <ScrollView>
              <Tab data={data} active={active} onActive={onActive} />
              <Swiper
                style={styles.swiper}
                height={200}
                dot={<View style={{           //未选中的圆点样式
                  backgroundColor: '#fff',
                  width: 10,
                  height: 3,
                  marginLeft: 2,
                }} />}
                activeDot={<View style={{    //选中的圆点样式
                  backgroundColor: '#f4ea2a',
                  width: 10,
                  height: 3,
                  marginLeft: 2,
                }} />}
                horizontal={true}
                paginationStyle={{ bottom: 10, color: '#fff' }}
                showsButtons={false}>
                <Image source={require('./src/image/banner.png')} style={styles.bannerimg} />
                <Image source={require('./src/image/banner.png')} style={styles.bannerimg} />
                <Image source={require('./src/image/banner.png')} style={styles.bannerimg} />
              </Swiper>

              <View style={styles.hotImgWrap}>
                <Image source={require('./src/image/title.png')} style={styles.hotImg} />
              </View>

              <View style={styles.imgWrap}>
                {
                  list.map((item, index) => {
                    return (
                      <TouchableOpacity
                        key={index}
                        style={styles.itemImgWrap}
                      >
                        <TouchableOpacity style={styles.itemImg}>
                          <Image source={item.img} style={styles.img} />
                          <View style={styles.textWrap}>
                            <Text style={styles.text}>{item.text}</Text>
                          </View>
                          <TouchableOpacity style={styles.iconWrap} onPress={() => onLike(index)}>
                            {
                              item.like ?
                                <Image style={styles.icon} source={require('./src/image/started.png')} />
                                :
                                <Image style={styles.icon} source={require('./src/image/start.png')} />

                            }
                          </TouchableOpacity>
                        </TouchableOpacity>
                      </TouchableOpacity>
                    )
                  })
                }
              </View>
            </ScrollView>
            :
            <View style={{flex: 1}}>
              <Text>{barData[barActive]}</Text>
            </View>
        }

        <View style={{ height: 65 }}>
          <Bar active={barActive} onActive={onBarActive} />
        </View>
      </View>
    )
  }

  return (
    renderContent()
  )
};

const styles = StyleSheet.create({
  iconWrap: {
    bottom: 120,
    left: '70%',
    position: 'relative',
    zIndex: 9999,
    backgroundColor: '#fff',
    width: 30,
    height: 30,
    borderRadius: 35,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  icon: {
    width: 20,
    height: 20
  },
  imgWrap: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  logoWrap: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f4ea2a'
  },
  logo: {

  },
  test: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1
  },
  textWrap: {
    position: 'relative',
    width: '100%',
    bottom: 30,
    left: 0,
    backgroundColor: 'rgba(0,0,0, 0.5)',
    zIndex: 9999,
    height: 30,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#fff'
  },
  img: {
    width: '100%',
    height: 120,
  },
  itemImgWrap: {
    backgroundColor: 'white',
    width: '50%',
    height: 140,
  },
  itemImg: {
    padding: 10,
    width: '100%',
    position: 'relative'
  },
  hotImgWrap: {
    paddingTop: 32,
    paddingBottom: 12,
    backgroundColor: '#fff',
  },
  hotImg: {
    width: '100%',
  },
  bannerimg: {
    height: 200,
    width: '100%'
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
